<link rel="stylesheet" type="text/css" href="<?= $base_url ?>css/fmis/information/view.css">

<div class="information">
    <div class="view">
        <div class="container-fluid">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#topics" data-toggle="tab">Topics</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="topics">
                    <div class="container-fluid">
                        <div class="tabs-left container-fluid col-lg-3">
                            <ul id='ulTopic' class = "nav nav-tabs col-lg-12">
                                <?php foreach($topics as $topic) {
                                    $id = $topic['InformationID'];
                                    $title = $topic['Title']; ?>
                                <li id = "<?= $id?>" ><a href='#topic<?= $id?>' data-toggle = 'tab'><?= $title?></a></li>
                                <?php } ?>
                            </ul>
                            <button class="button-primary" id="addTopic">Add a Topic</button>
                        </div>
                        <div class="col-lg-9 tab-content">
                            <?php foreach($topics as $topic) {
                                $id = $topic['InformationID'];
                                $title = $topic['Title'];
                                $content = $topic['Content'];?>
                            <div class="tab-pane" id="topic<?= $id?>">
                                <h1 class="topic-title"><?= $title?></h1>
                                <div class="topic-content">
                                    <?= $content?>
                                </div>
                            </div>
                            <?php } ?>
                            <form action="<?= $base_url?>fmis/information/update/" method="post" id="formedit">
                                <textarea id = "textAreaEditTitle" name="textarea_title">temp</textarea>
                                <textarea id = "textAreaEdit" name="textarea_content">temp</textarea>
                            </form>

                            <button id='btnDelete' class="button">Delete Information</button>
                            <button id='btnEdit' class="button">Edit Content</button>
                            <button id='saveEdit' class="button-primary">Save Edit</button>
                            <button id='cancelEdit' class="button">Cancel Edit</button>
                        </div>
                        <!-- -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="growlUI"></div>
<div id="dialog-addtopic" title="Add Topic">
    <form action="<?= $base_url?>fmis/information/addtopic"id="formaddtopic">
        <label for="addNewTopicTitle">Topic Name:</label>
        <textarea id="addNewTopicTitle" name = "addNewTopicTitle"></textarea>

        <label for="addNewTopicContent">Topic Content:</label>
        <textarea id="addNewTopicContent" name = "addNewTopicContent"></textarea>
    </form>
</div>
<div id="dialog-confirmdelete" title="Confirm Delete Information">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to delete this? This cannot be undone.</p>
</div>

<script>
    var idSelected;
    var divTopicSelected;
    var divTopicTitleSelected;
    var base_url = '<?php echo($base_url)?>';

    $(function() {
        $( "#dialog-addtopic" ).dialog({
            autoOpen: false,
            resizable: false,
            height:400,
            width: 600,
            modal: true,
            buttons: {
                "Add Topic": function() {

                    var form = $('#formaddtopic');

                    $.ajax({
                        url: form.attr('action'),
                        type: "POST",
                        data: form.serialize(),
                        dataType: 'json',
                        processData: false,
                        success: function (data, textStatus, jqXHR)
                        {
                            console.log(data);
                            if(data.success)
                            {
                                growl("Success", "Information Added","check48");

                                setTimeout(function(){window.location.replace('<?= $base_url?>fmis/information/view')}, 2300);
                            }
                            else
                            {
                                growl("Error", data.message,"error48");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                            console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);
                        }
                    });
                    $( this ).dialog( "close" );
                    $('#addNewTopicTitle').val('');
                    $('#addNewTopicContent').val('');
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        $( "#dialog-confirmdelete" ).dialog({
            autoOpen: false,
            resizable: false,
            height:200,
            width: 400,
            modal: true,
            buttons: {
                "Yes": function() {

                    $.ajax({
                        url: '<?= $base_url?>fmis/information/deleteTopic/' + idSelected,
                        dataType: 'json',
                        success: function (data, textStatus, jqXHR)
                        {
                            console.log(data);
                            if(data.success)
                            {
                                growl("Success", "Information Deleted", "check48");

                                setTimeout(function(){window.location.replace('<?= $base_url?>fmis/information/view')}, 2300);
                            }
                            else
                            {
                                growl("Error", data.message, "error48");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                            console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                No: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

    $('#ulTopic li').on('click', function(event){
        clicked = $(this);
        id = clicked.attr('id');

        idSelected = id;

            try
            {
                divTopicSelected.show();
                divTopicTitleSelected.show();
            }catch(error){}
        divTopicSelected = $(clicked.children('a').attr('href')).children('.topic-content');
        divTopicTitleSelected = $(clicked.children('a').attr('href')).children('.topic-title');

        $('#textAreaEditTitle').hide();
        $('#textAreaEdit').hide();
        $('#btnDelete').fadeIn();
        $('#btnEdit').fadeIn();
        $('#saveEdit').hide();
        $('#cancelEdit').hide();
    });

    $('#addTopic').on('click', function(event){
        $('#dialog-addtopic').dialog('open');
    });

    $('#saveEdit').on('click', function(event){
        $('#formedit').submit();
    });

    $('#btnDelete').on('click', function(event){
        $('#dialog-confirmdelete').dialog('open');
    });

    $('#formedit').on('submit', function(event){
        event.preventDefault();
        event.stopPropagation();

        var form = $(this);

        $.ajax({
            url: form.attr('action')+idSelected,
            type: "POST",
            data: form.serialize(),
            dataType: 'json',
            processData: false,
            success: function (data, textStatus, jqXHR)
            {
                console.log(data);

                if(data.success)
                {
                    growl("Success", "Information Edited","check48");

                    setTimeout(function(){window.location.replace('<?= $base_url?>fmis/information/view')}, 2300);
                }
                else
                {
                    growl("Error", data.message,"error48");
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });

    });




    $('#btnEdit').on('click', function(event){

        var content = divTopicSelected.html();
        var regex = /<br\s*[\/]?>/gi;
        var title = divTopicTitleSelected.html();
        $('#textAreaEdit').val(content.replace(regex, "\n").trim());
        $('#textAreaEditTitle').val(title.replace(regex, "\n").trim());

        $('#btnDelete').hide();
        $('#btnEdit').hide();
        divTopicSelected.hide();
        divTopicTitleSelected.hide();
        $('#textAreaEditTitle').fadeIn();
        $('#textAreaEdit').fadeIn();
        $('#saveEdit').fadeIn();
        $('#cancelEdit').fadeIn();
    });

    $('#cancelEdit').on('click', function(event){

        divTopicSelected.fadeIn();
        divTopicTitleSelected.fadeIn();

        $('#btnDelete').fadeIn();
        $('#btnEdit').fadeIn();
        $('#textAreaEditTitle').hide();
        $('#textAreaEdit').hide();
        $('#saveEdit').hide();
        $('#cancelEdit').hide();
    });


</script>



